<template>
  <div>
    <Breadcrumb :items="['系统管理', '用户管理']" />
    <a-card class="general-card" title="用户管理">
      <template #extra>
        <a-space direction="horizontal" :size="18">
          <a-button v-authorities="['sys:user:read']" type="primary" :loading="loading" @click="refresh">
            <template #icon>
              <icon-search />
            </template>
            搜索
          </a-button>
          <a-button v-authorities="['sys:user:read']" @click="reset">
            <template #icon>
              <icon-refresh />
            </template>
            重置
          </a-button>
        </a-space>
      </template>
      <a-form
        ref="form"
        :model="param"
        :label-col-props="{ span: 6 }"
        :wrapper-col-props="{ span: 18 }"
        label-align="left"
      >
        <a-row v-authorities="['sys:user:read']" :gutter="16">
          <a-col :xs="24" :sm="20" :md="12" :lg="8">
            <a-form-item
              field="username"
              label="用户名"
            >
              <a-input
                v-model="param.username"
                allow-clear
                placeholder="请输入用户名"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="20" :md="12" :lg="8">
            <a-form-item
              field="nickname"
              label="昵称"
            >
              <a-input
                v-model="param.nickname"
                allow-clear
                placeholder="昵称"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="20" :md="12" :lg="8">
            <a-form-item
              field="phone"
              label="手机号"
            >
              <a-input
                v-model="param.phone"
                allow-clear
                placeholder="请输入用户手机号"
              />
            </a-form-item>
          </a-col>
          <a-col :xs="24" :sm="20" :md="12" :lg="8">
            <a-form-item
              field="gender"
              label="性别"
            >
              <a-select
                v-model="param.gender"
                allow-clear
                placeholder="请选择性别"
              >
                <a-option :value="1">男</a-option>
                <a-option :value="0">女</a-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <!--分割线-->
      <a-divider direction="horizontal" />
      <a-row style="margin-bottom: 16px">
        <a-col :span="16">
          <a-space>
            <a-button v-authorities="['sys:user:write']" type="primary" @click="openDrawer(null, '添加', Operation.CREATE)">
              <template #icon>
                <icon-plus />
              </template>
              添加
            </a-button>
          </a-space>
        </a-col>
        <a-col :span="8" style="text-align: right">
          <a-space>
            <table-column-setting v-model:columns="columns" />
          </a-space>
        </a-col>
      </a-row>
      <a-table
        :columns="columns"
        :data="records"
        :loading="loading"
        :stripe="true"
        row-key="id"
        :pagination="false">
        <template #number="{ record, rowIndex }">
          {{ rowIndex + 1 }}
        </template>
        <template #avatar="{ record }">
          <a-avatar>
            <img :alt="record.nickname || record.username" :src="record.avatar"/>
          </a-avatar>
        </template>
        <template #role="{ record }">
          <a-space>
            <a-tag v-for="role in record.roles" :key="role.id">
              {{ role.name }}
            </a-tag>
          </a-space>
        </template>
        <template #dept="{ record }">
          <a-space>
            <a-tag v-for="dept in record.depts" :key="dept.id">
              {{ dept.name }}
            </a-tag>
          </a-space>
        </template>
        <template #gender="{ record }">
          <icon-man v-if="record.gender === 1" style="color: #0097CF" />
          <icon-woman v-else-if="record.gender === 0" style="color: #E85B88" />
          <icon-eye-invisible v-else />
        </template>
        <template #enabled="{ record }">
          <a-switch
            v-model="record.enabled"
            type="round"
            unchecked-color="#F53F3F"
            :checked-value="true"
            :unchecked-value="false"
            :disabled="true"
          >
            <template #checked>
              <span>正常</span>
            </template>
            <template #unchecked>
              异常
            </template>
          </a-switch>
        </template>
        <template #nonLocked="{ record }">
          <icon-unlock v-if="record.nonLocked" style="color: cornflowerblue" />
          <icon-lock v-else style="color: grey" />
        </template>
        <template #operation="{ record }">
          <a-space>
            <a-button v-authorities="['sys:user:read']"  type="text" size="small" @click="openDrawer(record.id, '查看', Operation.PREVIEW)">
              查看
            </a-button>
            <a-button v-authorities="['sys:user:write']"  type="text" size="small" @click="openDrawer(record.id, '修改', Operation.UPDATE)">
              修改
            </a-button>
            <a-popconfirm :content="'确定删除 ' + record.nickname || record.username + ' 吗?'" type="warning">
              <a-button v-authorities="['sys:user:write']"  type="text" size="small" status="danger">
                删除
              </a-button>
            </a-popconfirm>
          </a-space>
        </template>
        <template #footer>
          <a-pagination
            v-model:current="page.current"
            v-model:page-size="page.size"
            :total="page.total"
            size="small"
            :show-page-size="true"
            :show-total="true"
            :page-size-options="[10, 15, 20, 30, 50]"
            style="margin-top: 10px; float: right"
            @change="refresh"
            @page-size-change="refresh"
          />
        </template>
      </a-table>
    </a-card>

    <user-board ref="drawer" :roles="roles" @ok="refresh"/>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import useLoading from "@/hooks/loading";
import { listWithPagination } from "@/api/modules/system/user";
import { Operation } from "@/types/global";
import UserBoard from "@/views/system/user/components/user-board.vue";

const { loading, setLoading } = useLoading();

const columns = [{
  title: '#',
  align: 'right',
  fixed: 'left',
  width: 50,
  slotName: 'number'
}, {
  title: "用户名",
  dataIndex: "username",
  fixed: 'left'
}, {
  title: "昵称",
  dataIndex: "nickname"
}, {
  title: "头像",
  dataIndex: 'avatar',
  slotName: 'avatar',
}, {
  title: '手机号',
  dataIndex: 'phone',
  hidden: true
}, {
  title: '邮箱',
  dataIndex: 'email',
  hidden: true
}, {
  title: "角色",
  dataIndex: "role",
  slotName: 'role'
}, {
  title: "部门",
  dataIndex: "dept",
  slotName: 'dept',
  hidden: true
}, {
  title: "性别",
  dataIndex: "gender",
  slotName: 'gender'
}, {
  title: "状态",
  dataIndex: "enabled",
  slotName: 'enabled'
}, {
  title: "锁定",
  dataIndex: "nonLocked",
  slotName: 'nonLocked'
}, {
  title: '注册日期',
  dataIndex: 'createTime',
  width: 200,
  hidden: true
}, {
  title: "操作",
  width: 220,
  dataIndex: "operation",
  align: "right",
  fixed: "right",
  slotName: 'operation'
}]

export default defineComponent({
  name: 'User',
  components: {UserBoard},
  data() {
    return {
      param: {
        id: '',
        username: "",
        nickname: "",
        gender: null,
        phone: ""
      },
      page: {
        current: 1,
        size: 10,
        total: 0
      },
      records: [],
      loading,
      columns,
      Operation,
      roles: [],
      depts: []
    }
  },
  mounted() {
    this.refresh()
  },
  methods: {
    async refresh() {
      try {
        setLoading(true)
        const { data } = await listWithPagination(this.page, this.param)
        this.records = data.records
        const { current, size, total } = data
        this.page = {
          current,
          size,
          total
        }
      } finally {
        setLoading(false)
      }
    },
    reset() {
      this.$refs.form.resetFields()
      this.refresh()
    },
    openDrawer(id, title, type) {
      this.$refs.drawer.open(id, title, type)
    }
  }
})

</script>

<style scoped>

</style>
